<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>格子banner</title>
    <style>
        *{margin: 0;padding: 0;}
    </style>
    <link rel="stylesheet" href="slider/slider.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="slider/slider.js"></script>
</head>
<body>
    <div class="slider-box" id="modelSlider">
        <!-- banner -->
    </div>
    <button class="btn btn-primary" style="margin-right: 20px;" onclick="$('#modelSlider').slider('resize',{border:true})" type="button">显示border</button>
     <button class="btn btn-primary" style="margin-right: 20px;" onclick="$('#modelSlider').slider('resize',{border:false})" type="button">隐藏border</button> 
     <button class="btn btn-primary" style="margin-right: 20px;" onclick="$('#modelSlider').slider('resize',{showBar:true})" type="button">显示切换栏</button> 
     <button class="btn btn-primary" style="margin-right: 20px;" onclick="$('#modelSlider').slider('resize',{showBar:false})" type="button">隐藏切换栏</button> 
     <button class="btn btn-primary" style="margin-right: 20px;" id='next' type="button">下一张</button> 
     <button class="btn btn-primary" style="margin-right: 20px;" id='prev' type="button">上一张</button> 
    <script>
        $(function() {
            /*                
                imgs: [],       //图片路径数组
                urls: [],         //点击跳转到的链接
                x: 2,          //横向模块数量
                y: 2,          //纵向模块数量
                scale: 4 / 3,      //宽高比
                delay: 800,        //动画时长
                interval: 5000,  //自动播放间隔
                border: false   //显示模块间隔*/
            $(".slider-box").slider({
                imgs: [  //图片的地址
                    'img/1.jpg',
                    'img/2.jpg',
                    'img/3.jpg',
                    'img/4.jpg',
                    'img/5.jpg'
                ],
                scale: 16 / 9,   //图片宽高比
                border: true,   //是否显示分界线
                showBar: true,    //是否显示分页器
                x: 10,      //横向格子数
                y: 6      //纵向格子数
            });

            /*上一张*/
            $('#prev').on('click',function(){
                var prevIndex = $(".slider-box").data('slider').prevIndex();
                $(".slider-box").data('slider').choseImg(prevIndex);
            })
            /*下一张*/
            $('#next').on('click',function(){
                var nextIndex = $(".slider-box").data('slider').nextIndex();
                $(".slider-box").data('slider').choseImg(nextIndex);
            })
 
        })
    </script>
</body>
</html>